<template>
  <div class="addKeyOut">
    <!-- 标题和ADD按钮 -->
    <div class="header">
      <h3>Add Custom Key</h3>
      <button @click="addCustomKey" class="add-button">ADD</button>
    </div>

    <!-- 动态添加的键 -->
    <div v-for="(key,index) in customKeys" :key="key.id" class="custom-key-row">
      <!-- Type选择器 -->
      <select v-model="key.type" class="select-type">
        <option value="bool">bool</option>
        <option value="int">int</option>
        <option value="str">str</option>
      </select>

      <!-- Keyname 输入框 -->
      <input v-model="key.name" class="keyname-input" placeholder="Enter Keyname" />

      <!-- 删除按钮 -->
      <button @click="removeCustomKey(index)" class="remove-button">X</button>

      <textarea 
            id="keyNote"
            v-model="key.note"
            placeholder="Descripe the key"
            :class="['text-input','nodrag']"
      ></textarea>
    </div>
  </div>
</template>

<script lang="ts">
import { type HandleType } from '@vue-flow/core';
import { type PropType } from 'vue';
import { defineProps, ref, watch } from 'vue';
import {type CustomKey} from './ts/customKey';
export default {
  props: {
    modelValue: {
      type: Array<CustomKey>,
      default: () => [],
    },
    handle_type: {
      type: String as PropType<HandleType>,
      default: 'source',
    },
  },
  setup(props, { emit }) {
    // 使用 ref 处理自定义键的数据
    const customKeys = ref([...props.modelValue]);

    // 监听 modelValue 变化，以便更新 local customKeys
    watch(
      () => props.modelValue,
      (newVal) => {
        customKeys.value = [...newVal];
      },
      { deep: true }
    );

    // 添加自定义 key
    const addCustomKey = () => {
      customKeys.value.push({ type: 'str', name: '' ,id: Math.random().toString(),note:'', handle_type:props.handle_type||'source' });
      emit('update:modelValue', customKeys.value);  // 更新父组件的数据
    };

    // 删除自定义 key
    const removeCustomKey = (index: number) => {
      customKeys.value.splice(index, 1);
      emit('update:modelValue', customKeys.value);  // 更新父组件的数据
    };

    return {
      customKeys,
      addCustomKey,
      removeCustomKey,
    };
  },
};
</script>
<style scoped>
.addKeyOut {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.add-button {
  padding: 6px 12px;
  border: none;
  background-color: #4caf50;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

.add-button:hover {
  background-color: #45a049;
}

.custom-key-row {
  display: inline-block;
  gap: 10px;
  align-items: center;
}

.select-type {
  
  padding-top: 6px;
  padding-bottom: 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  flex: 1;
  width: 20%;
}

.keyname-input {
  padding: 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  flex: 2;
  width: 70%;
}

.remove-button {
  padding: 6px;
  border: none;
  background-color: #f44336;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  text-align: center;
  width: 10%;
}

.remove-button:hover {
  background-color: #d32f2f;
}
</style>